

<template>
  <div id="app">
    <!-- 搜索头 -->
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      background="#2BCDDD"
      class="inp"
    >
      <template #left>
        <div class="left" @click="fun"><van-icon name="arrow-left" /></div>
      </template>
      <template #action>
        <div class="right" @click="onClickButton">搜索</div>
      </template>
    </van-search>

    <!-- 历史搜索 -->
    <div class="history">
      <ul>
        <li>历史搜索</li>
        <span @click="Delete" class="iconfont icon-shanchu"></span>
      </ul>
      <!-- 商品历史数据 -->
      <div>
        <span v-for="item in CountList" :key="item">
          <!-- <span class="Span">{{ item }}</span> -->
          {{ item }}
        </span>
      </div>
    </div>

    <!-- 热门讨论 -->
    <div class="HotDiscussion">
      <ul>
        <li>热门讨论</li>
        <span class="iconfont icon-faxian-yanjing"></span>
      </ul>
      <!-- 讨论数据 -->
      <div v-for="(item, index) in Discussion" :key="index">
        <span>{{ item }}</span>
        <span>TOP {{ index }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import "../assets/font-icon/iconfont.css";
import { ref, reactive } from "vue";
import { useRouter, onBeforeRouteUpdate } from "vue-router";
import { search } from "../api/index";
import { ExchangeInfo } from "../stores/ExchangeOrder";
import { useDetailStore } from "../stores/detail"
import { showDialog } from "vant";
const stores = ExchangeInfo();
const stores1 = useDetailStore()
const List = ref([0, 1, 2, 3, 4, 5, 6]);
const CountList = ref([]);



if (localStorage.List) {
  CountList.value = JSON.parse(window.localStorage.List);
}
// 激活路由
const router = useRouter();
const value = ref("");
// 热门讨论数据
const Discussion = reactive([
  "奶茶应该怎么扔?",
  "垃圾分类",
  "回收时间表",
  "怎么识别垃圾种类",
]);
// 跳转上一级路由
const fun = () => {
  // 返回上一级
  router.go(-1);
};

// 点击搜索
const onClickButton = (val) => {
  val = value.value;
  if (val != "" && window.localStorage.getItem("List") == null) {
    window.localStorage.List = JSON.stringify([val]);
    CountList.value = val;
  } else if (val != "") {
    const Arr = JSON.parse(window.localStorage.List);
    Arr.unshift(val);
    window.localStorage.List = JSON.stringify(Arr);
    CountList.value = [...Arr];
  }

  if (val == "") {
    router.push("/Search");
    showDialog({
      message: "你没有输入内容",
    }).then(() => {
      // on close
    });
    return;
  }

  search(val).then((res) => {
    stores.searchData = res.data.data.goodsList;
    if (stores.searchData == null && stores.searchData1 == null) {
      console.log(111);
      router.push("/SearchNoGoods");
      return;
    } else {
      router.push({
        path: "/SearchGoods",
        query: {
          val: val,
        },
      });
    }
  });

  search(val).then((res) => {
    stores.searchData1 = res.data.data.garbageTypeList;
    if (
      val == "" ||
      (stores.searchData1 == null && stores.searchData == null)
    ) {
      router.push("/SearchNoGoods");
    } else {
      router.push({
        path: "/SearchGoods",
        query: {
          val: val,
        },
      });
    }
  });
};
// 点击历史删除
const Delete = () => {
  window.localStorage.removeItem("List");
  location.reload();
};
</script>

<style lang="less" scoped>
.left {
  color: #fff;
  font-size: 6.333vw;
  margin-right: 3.333vw;
}
.van-search__content {
  border-radius: 6.667vw;
}
.right {
  background-color: #fff;
  color: #2bcddd;
  border-radius: 6.667vw;
  width: 60px;
  text-align: center;
  font-size: 2.133vw;
}
// 历史搜索样式
.history {
  margin-top: 7.667vw;
  div {
    padding: 3.667vw;
    padding-right: 20.667vw;
    span {
      display: inline-block;
      color: #fff;
      margin-bottom: 3.333vw;
      padding: 1.333vw 2vw;
      border-radius: 4.333vw;
      margin-right: 2.667vw;
      background-color: #2bcddd;
    }
  }
  ul {
    display: flex;
    padding: 0 3.333vw;
    justify-content: space-between;
    li {
      padding-left: 1.6vw;
      border-left: 1.267vw solid red;
      font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
      font-weight: 700;
      font-style: normal;
      font-size: 14px;
      text-align: left;
    }
    span {
      font-size: 4.733vw;
      color: rgba(43, 205, 221, 1);
    }
  }
}

// 热门讨论搜索
.HotDiscussion {
  ul {
    margin-bottom: 7vw;
    display: flex;
    padding: 0 3.333vw;
    justify-content: space-between;
    li {
      padding-left: 1.6vw;
      border-left: 1.267vw solid red;
      font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
      font-weight: 1000;
      font-style: normal;
      font-size: 14px;
      text-align: left;
    }
    span {
      font-weight: 1000;
      font-size: 4.733vw;
      color: rgba(43, 205, 221, 1);
    }
  }
  div {
    display: flex;
    justify-content: space-between;
    padding: 0 3.667vw;
    span {
      display: inline-block;
      margin-bottom: 3.667vw;
      font-family: "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: 2.6vw;
      text-align: left;
    }
  }
}
</style>
